<script>
  export default {
    data(){
      return{
        isShow:true
      }
    },
    methods:{

    }
  }

</script>

<template>
  <div>08_transition.vue
    <button @click="isShow = !isShow">点击</button>
    <!--淡出的移开，淡入的移入-->

    <!--滑入滑出 .slide-enter-from .slide开始
        mode="in-out" 先进后出
        mode="out-in" 先出后进-->
    <transition name="slide" mode="out-in">
      <!--淡入淡出 .fade-enter-from .fade开始-->
      <!--<transition name="fade">-->
      <div v-if="isShow" class="box"></div>
      <div v-else class="box2"></div>

    </transition>
  </div>
</template>

<style scoped>
.box{
  width: 100px;
  height: 200px;
  background: skyblue;
}

.box2{
  width: 200px;
  height: 400px;
  background: pink;
}

.fade-enter-from{
  opacity: 0;
}

.fade-enter-to{
  opacity: 1;
}

.fade-enter-active{
  transition: 1s;
}

.fade-leave-from{
  opacity: 1;
}

.fade-leave-to{
  opacity: 0;
}

.fade-leave-active{
  transition: 1s;
}

.slide-enter-from{
  opacity: 0;
  transform: translateX(200px);
}

.slide-enter-to{
  opacity: 1;
  transform: translateX(0);
}

.slide-enter-active{
  transition: 1s;
}

.slide-leave-from{
  opacity: 1;
  transform: translateX(0);

}

.slide-leave-to{
  opacity: 0;
  transform: translateX(200px);

}

.slide-leave-active{
  transition: 1s;
}

</style>